<template>
  <div id="wrap">
    <div>
     <canvas id="canvas"></canvas>
    </div>
    <hello-world>
      <div id="target"></div>
    </hello-world>
    
  </div>
  
</template>

<script setup>
import { onMounted, reactive, watch, toRefs } from "vue";
import HelloWorld from '../components/HelloWorld.vue'
let state = reactive({
  x: 20,//小球开始的x轴坐标
  y: 20,//小球开始的y轴坐标
  size: 10, //小球半径
  dx: 5, //每次向x轴移动的距离
  dy: 4, //每次向y轴移动的距离
});

/* function drawCricle(context){
    context.beginPath();
    context.fillStyle = 'pink';
    context.arc(state.x,state.y,state.size,0,2*Math.PI)
    context.fill();
  } */

onMounted(() => {
  let canvas = document.querySelector("#canvas");
  let context = canvas.getContext("2d");
  /*
  //画正方形
  context.fillStyle = "pink";
  context.fillRect(50, 50, 200, 100); */
  //画滚动小球
  function drawCricle() {
    context.clearRect(0,0,canvas.width,canvas.height)//清除之前的绘制
    context.beginPath();
    context.fillStyle = "pink";
    context.arc(state.x, state.y, state.size, 0, 2 * Math.PI);
    context.fill();
  }
  function update() {
    drawCricle()
    state.x +=state.dx;
    state.y += state.dy;
    if(state.x+state.size>canvas.width || state.x-state.size<0){
        state.dx *=-1
    }
    if(state.y+state.size>canvas.height || state.y-state.size<0){
        state.dy *=-1
    }
    requestAnimationFrame(update)
  }
  update();
});
</script>

<style scoped>
/* #wrap{
  margin: 0 auto;
  height: 900px;
} */
#canvas{
    width: 3rem;
    height: 3rem;
    border: 0.01rem solid lightcoral;
}


</style>